@extends('admin::layouts.master')

@section('title', __('admin/common.customer'))

@section('content')
<div id="customer-app-form" class="card" v-cloak>
  <div class="card-body">
    <button class="btn btn-outline-secondary btn-sm" type="button"
            @click="editAddress('index')">{{ __('common.edit') }}</button>
  </div>

  <el-dialog title="{{ __('admin/customer.edit_address') }}" :visible.sync="dialogAddress.show" width="650px"
             @close="closeAddressDialog('addressForm')">
    <el-form ref="addressForm"  :model="dialogAddress.form" label-width="100px">
      <el-form-item label="{{ __('address.name') }}" prop="name">
        <el-input v-model="dialogAddress.form.name"></el-input>
      </el-form-item>
      <el-form-item label="{{ __('common.phone') }}" prop="phone">
        <el-input maxlength="11" v-model="dialogAddress.form.phone"></el-input>
      </el-form-item>
      <el-form-item label="{{ __('admin/customer.address') }}" required>
        <div class="row">
          <div class="col-4">
            <el-form-item>
              <el-select v-model="dialogAddress.form.country_id" filterable placeholder="{{ __('admin/customer.choose_country') }}" @change="countryChange">
                <el-option v-for="item in source.countries" :key="item.id" :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-4">
            <el-form-item prop="zone_id">
              <el-select v-model="dialogAddress.form.zone_id" filterable placeholder="{{ __('admin/customer.choose_zones') }}">
                <el-option v-for="item in source.zones" :key="item.id" :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-4">
            <el-form-item prop="city">
              <el-input v-model="dialogAddress.form.city" placeholder="{{ __('admin/customer.enter_city') }}"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="{{ __('admin/customer.zipcode') }}" prop="zipcode">
        <el-input v-model="dialogAddress.form.zipcode"></el-input>
      </el-form-item>
      <el-form-item label="{{ __('admin/customer.address_1') }}" prop="address_1">
        <el-input v-model="dialogAddress.form.address_1"></el-input>
      </el-form-item>
      <el-form-item label="{{ __('admin/customer.address_2') }}">
        <el-input v-model="dialogAddress.form.address_2"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addressFormSubmit('addressForm')">{{ __('common.save') }}</el-button>
        <el-button @click="closeAddressDialog('addressForm')">{{ __('common.cancel') }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>

@hook('admin.customer.form.footer')
@endsection

@push('footer')
<script>
  let app = new Vue({
    el: '#customer-app-form',
    data: {

      source: {
        customer_group: [],
        countries: [],
        zones: []
      },
      dialogAddress: {
        show: false,
        index: null,
        form: {
          name: '',
          phone: '',
          zipcode: '',
            zone_id: '',
            city: '',
            city_id: '',
            address_1: '',
            address_2: '',
    }
  },

  },

  methods: {
    editAddress(index) {
      // if (typeof index == 'number') {
      //   this.dialogAddress.index = index;
      //   this.dialogAddress.form = JSON.parse(JSON.stringify(this.addresses[index]))
      //   this.countryChange(this.dialogAddress.form.country_id);
      // }

      // this.countryChange(this.dialogAddress.form.country_id);
      this.dialogAddress.show = true
    },

    countryChange(e) {
      const self = this;

      $http.get(`countries/${e}/zones`, null, {
        hload: true
      }).then((res) => {
        this.source.zones = res.data.zones;

        if (!res.data.zones.some(e => e.id == this.form.zone_id)) {
          this.form.zone_id = '';
        }
      })
    },
  }
  });

  @hook('admin.customer.form.js.after')
</script>
@endpush
